<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0" />
<title>设计师注册</title>
<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
<link rel="stylesheet" href="../../static/weixin/css/common.css"
	th:href="@{/weixin/css/common.css}" />
<script type="text/javascript" th:src="@{/weixin/js/zepto.min.js}"></script>
<script type="text/javascript" src="../../static/weixin/js/weui.min.js"
	th:src="@{/weixin/js/weui.min.js}"></script>
<script type="text/javascript"
	src="../../static/weixin/js/fastclick.min.js"
	th:src="@{/weixin/js/fastclick.min.js}"></script>
<script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"
	th:src="@{/weixin/js/jweixin-1.0.0.js}"></script>
<style type="text/css">
button.weui-vcode-btn {
	background-color: transparent;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	outline: 0;
}
</style>
</head>

<body>
	<div class="container" id="container">
		<!-- Main content -->
		<div class="page">
			<div class="page__bd">
				<form id="form" method="post">
					<input name="type" type="hidden" value="1" /> <input id="latitude"
						name="latitude" type="hidden" /> <input id="longitude"
						name="longitude" type="hidden" />
					<div class="weui-cells__title">姓名</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" id="name" name="name" required=""
									maxlength="10" type="text" emptytips="请输入姓名"
									placeholder="请输入姓名"></input>
							</div>
							<div class="weui-cell__ft">
								<i class="weui-icon-warn"></i>
							</div>
						</div>
					</div>

					<div class="weui-cells__title">性别</div>
					<div class="weui-cells weui-cells_radio">
						<label class="weui-cell weui-check__label" for="x11">
							<div class="weui-cell__bd">
								<p>男</p>
							</div>
							<div class="weui-cell__ft">
								<input type="radio" class="weui-check" value="男" name="sex"
									id="x11" checked="checked" /> <span class="weui-icon-checked"></span>
							</div>
						</label> <label class="weui-cell weui-check__label" for="x12">
							<div class="weui-cell__bd">
								<p>女</p>
							</div>
							<div class="weui-cell__ft">
								<input type="radio" name="sex" class="weui-check" value="女"
									id="x12" /> <span class="weui-icon-checked"></span>
							</div>
						</label>
					</div>

					<div class="weui-cells__title">社交帐号</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__hd">
								<label class="weui-label">QQ</label>
							</div>
							<div class="weui-cell__bd">
								<input class="weui-input" id="qq" name="qq" type="text"
									placeholder="请输入QQ" />
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd">
								<label class="weui-label">微信</label>
							</div>
							<div class="weui-cell__bd">
								<input class="weui-input" id="weixin" name="weixin" type="text"
									placeholder="请输入微信" />
							</div>
						</div>
					</div>
					<div class="weui-cells__tips">QQ和微信至少填一个</div>

					<div class="weui-cells__title">邮箱</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" id="email" name="email" type="email"
									required=""
									pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
									maxlength="50" emptytips="请输入邮箱" placeholder="请输入邮箱"
									notmatchtips="请输入正确的邮箱" />
							</div>
							<div class="weui-cell__ft">
								<i class="weui-icon-warn"></i>
							</div>
						</div>
					</div>

					<div class="weui-cells__title">手机号</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" id="mobile" name="mobile" type="tel"
									required="" pattern="^\d{11}$" maxlength="11"
									placeholder="输入你现在的手机号" emptytips="请输入手机号"
									notmatchtips="请输入正确的手机号"></input>
							</div>
							<div class="weui-cell__ft">
								<span id="code" class="weui-vcode-btn">获取验证码</span>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" name="verifyCode" type="text"
									placeholder="请输入验证码" required="" pattern="^[0-9]{6}$"
									emptytips="请输入验证码" notmatchtips="验证码为6为数字" />
							</div>
							<div class="weui-cell__ft">
								<i class="weui-icon-warn"></i>
							</div>
						</div>
					</div>

					<div class="weui-cells__title">密码</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" required=""
									pattern="^[a-zA-Z0-9]{6,10}$" id="password" name="password"
									type="password" emptytips="请输入密码" placeholder="请输入密码"
									notmatchtips="密码为6至10位的数字或字母" />
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" id="repeatPwd" type="password"
									placeholder="请再次输入密码" required="" emptytips="请再次输入密码" />
							</div>
						</div>

					</div>

					<div class="weui-cells__title">邀请码</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" name="invitateCode" type="text"
									placeholder="请输入邀请" />
							</div>
						</div>
					</div>

					<div class="weui-cells__title">城市</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<select class="weui-select" name="city">
								<option value=""></option>
								<option th:each="city:${cities}"
										th:value="${city.value}"
										th:text="${city.name}"></option>
							</select>
						</div>
					</div>

					<div class="weui-cells__title">擅长设计</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<select class="weui-select" name="major">
								<option value=""></option>
								<option th:each="major:${majors}"
										th:value="${major.value}"
										th:text="${major.name}"></option>
							</select>
						</div>
					</div>

					<div class="weui-cells__title">级别</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<select class="weui-select" name="grade">
								<option value="0" selected="selected">普通设计师</option>
								<option value="1">原创设计师</option>
							</select>
						</div>
					</div>

                <!--<div class="weui-cells__title">状态</div>-->
                <!--<div class="weui-cells weui-cells_radio">-->
                <!--<label class="weui-cell weui-check__label" for="x13">-->
                <!--<div class="weui-cell__bd">-->
                <!--<p>已认证</p>-->
                <!--</div>-->
                <!--<div class="weui-cell__ft">-->
                <!--<input type="radio" class="weui-check" value="1" name="status"-->
                <!--id="x13" checked="checked" /> <span class="weui-icon-checked"></span>-->
                <!--</div>-->
                <!--</label> <label class="weui-cell weui-check__label" for="x14">-->
                <!--<div class="weui-cell__bd">-->
                <!--<p>未认证</p>-->
                <!--</div>-->
                <!--<div class="weui-cell__ft">-->
                <!--<input type="radio" name="status" value="0" class="weui-check"-->
                <!--id="x14" /> <span class="weui-icon-checked"></span>-->
                <!--</div>-->
                <!--</label>-->
                <!--</div>-->

					<div class="weui-btn-area">
						<input type="button" id="submit" class="weui-btn weui-btn_primary"
							value="确定" />
					</div>
				</form>
			</div>
		</div>
	</div>
	<script th:inline="javascript">
		var jsconfig = /*[[${config}]]*/null;
		var appid = /*[[${appid}]]*/null;

		$(function() {
			wx.config({
				appId : appid,
				timestamp : jsconfig["timestamp"],
				nonceStr : jsconfig["noncestr"],
				signature : jsconfig["signature"],
				jsApiList : [ "getLocation" ]
			});

			wx.ready(function() {
				wx.checkJsApi({
					jsApiList : [ 'getLocation' ],
					success : function(res) {
						wx.getLocation({
							type : 'wgs84',
							success : function(res) {
								$("#latitude").val(res.latitude); // 纬度，浮点数，范围为90 ~ -90
								$("#longitude").val(res.longitude); // 经度，浮点数，范围为180 ~ -180。
							}
						});
					}
				});
			});
		});

		$("#code").click(function() {
			if(!(/^1[34578]\d{9}$/.test($("#mobile").val()))){ 
		        weui.topTips("请输入正确的手机号码");  
		        return false; 
		    } 
			
			var l = weui.loading("正在提交")
			$.get("/mall/sms/code?mobile=" + $("#mobile").val(), function(data) {
                l.hide();
			    if (data.code != 1){
			        weui.alert(data.msg);
			        return;
				}

				weui.alert("获取验证码成功，60秒后重新获取");
				$("#code").hide();
				setTimeout("$('#code').show()", 60000);
			})
		});
	</script>
	<script th:inline="javascript">
	var contextPath = /*[[@{/}]]*/ null;

		$(function() {
			$("#submit").click(function() {
				weui.form.validate("#form", function(error) {
					if (error || validate())
						return;

					var l = weui.loading("正在提交")
					$.ajax({
						cache : true,
						type : "POST",
						url : "/mall/weixin/mall/register",
						data : $('#form').serialize(),
						error : function(request) {
							l.hide();
							weui.alert("Connection error");
						},
						success : function(data) {
							l.hide();
							if (data.code == 1){
                                if (!data.redirectUrl) {
                                    window.location.href = contextPath + "weixin/mall/registerSuccess";
                                } else {
                                    window.location.href = data.redirectUrl;
                                }
							} else{
								weui.alert(data.msg);
                            }
						}
					});
				})
			})
		});

		function validate() {
			if ($("#password").val() != $("#repeatPwd").val()) {
				weui.topTips("两次密码不一致");
				return true;
			}

            if (!($("#qq").val() != '' || $("#weixin").val() != '')) {
                weui.topTips("QQ和微信至少填一个");
                return true;
            }

			return false;
		}
	</script>

</body>
</html>
